<script setup>
import { ref } from "vue";
import axios from 'axios';

const inputData = ref("");
const resData = ref([]);
const addthink = ref(false);
const thinkString = ref("");
const addanswer = ref(false);
const answerString = ref("");

function addThinkString(data) {
  if (data.content === "<think>") {
    addthink.value = true;
    addanswer.value = false
    return;
  }
  if (data.content === "</think>") {
    addthink.value = false;
    return;
  }
  if (addthink.value) {
    thinkString.value += data.content;
    addanswer.value = false;
  }
}

function addAnswerString(data) {
  if (data.content === "</think>") {
    addanswer.value = true;
    return;
  }
  if (data.done) {
    addanswer.value = false;
    return;
  }
  if (addanswer.value) {
    answerString.value += data.content;
  }
}

async function sendQuestion() {
  thinkString.value = "";
  answerString.value = "";

  try {
    const response = await fetch("http://localhost:11434/api/chat", {
      method: "POST",
      url: "http://localhost:11434/api/chat",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "deepseek-r1:7b",
        messages: [{ role: "user", content: inputData.value }],
        temperature: 0.7,
        max_tokens: 512,
        stream: true
      })
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8");
    let buffer = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      buffer += decoder.decode(value);
      console.log(buffer);
      
      // 处理可能的多行数据
      let lineEndIndex;
      while ((lineEndIndex = buffer.indexOf('\n')) >= 0) {
        const line = buffer.slice(0, lineEndIndex).trim();
        buffer = buffer.slice(lineEndIndex + 1);

        if (!line) continue;

        try {
          const parsed = JSON.parse(line);
          if (parsed.message) {
            if (parsed == '') {
              addAnswerString({ role: "assistant", content: "" })
              return
            }
            addThinkString(parsed.message);
            addAnswerString(parsed.message);
          }
        } catch (e) {
          console.error("JSON解析错误:", e);
        }
      }
    }
  } catch (error) {
    console.error("请求失败:", error);
  }
}
</script>

<template>
  <!-- 保持原有模板不变 -->
  <div class="main_container">
    <div>
      <span>请输入问题</span><input type="text" v-model.lazy="inputData" />
    </div>
    <button @click="sendQuestion">发送问题</button>
    <div>思考：</div>
    <div class="textcontent">{{ thinkString }}</div>
    <div>答案：</div>
    <div class="textcontent">{{ answerString }}</div>
  </div>
</template>

<style>
.main_container {
  width: 100vw;
  height: fit-content;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  border: 1px solid red;
  div, button {
    margin: 1rem;
  }
  .textcontent {
    width: 80vw;
    height: fit-content;
    min-height: 2rem;
    text-align: left;
    border: 1px solid black;
  }
}
</style>